<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;position: fixed; left: 50%; top: 50%; margin:-100px 0 0 -100px;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 20)">
      <rect x="-15" y="-15" width="30" height="30" fill="#e15b64">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.4s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(50 20)">
      <rect x="-15" y="-15" width="30" height="30" fill="#f47e60">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.3s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(80 20)">
      <rect x="-15" y="-15" width="30" height="30" fill="#f8b26a">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.2s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(20 50)">
      <rect x="-15" y="-15" width="30" height="30" fill="#f47e60">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.3s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(50 50)">
      <rect x="-15" y="-15" width="30" height="30" fill="#f8b26a">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.2s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(80 50)">
      <rect x="-15" y="-15" width="30" height="30" fill="#abbd81">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.1s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(20 80)">
      <rect x="-15" y="-15" width="30" height="30" fill="#f8b26a">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.2s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(50 80)">
      <rect x="-15" y="-15" width="30" height="30" fill="#abbd81">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="-0.1s"></animateTransform>
      </rect>
    </g>
    <g transform="translate(80 80)">
      <rect x="-15" y="-15" width="30" height="30" fill="#849b87">
        <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" calcMode="spline" dur="1s" values="1;1;0.2;1;1" keyTimes="0;0.2;0.5;0.8;1" keySplines="0.5 0.5 0.5 0.5;0 0.1 0.9 1;0.1 0 1 0.9;0.5 0.5 0.5 0.5" begin="0s"></animateTransform>
      </rect>
    </g>

  </svg>
  <h3>{{props.progress}}%</h3>
</template>

<script setup>
const props = defineProps({
  progress: Number
})
</script>

<style lang="scss" scoped>
h3 {
  @apply absolute top-[100px] left-1/2 text-red-300 text-3xl font-black;
}
</style>